<template>
    <el-card>
        <template #header>
            <div class='card-header'>
                <span>创建子账号</span>
            </div>
        </template>

        <el-steps
            :active='active'
            finish-status='success'
            process-status='process'
            align-center
            style='margin-top: 20px;margin-bottom: 20px;'
        >
            <el-step title='子账号信息设置' />
            <el-step title='成功' />
        </el-steps>
        <el-row>
            <el-col :span='20' :offset='2'>
                <el-form
                    v-if='active == 0'
                    ref='formRef'
                    :model='form'
                    :rules='rules'
                    label-width='120px'
                >
                    <el-form-item label='子账号用户名' prop='user'>
                        <el-input v-model='form.user' />
                    </el-form-item>

                    <el-form-item label='子账号密码' prop='password'>
                        <el-input v-model='form.password' />
                    </el-form-item>

                    <el-form-item label='子账号手写签名' prop='image'>
                        <el-upload
                            ref='upload'
                            class='avatar-uploader'
                            action='#'
                            :show-file-list='false'
                            :on-change='upLoadFun'
                            :auto-upload='false'
                        >
                            <el-button type='primary' v-if='form.image == ""'>点击上传</el-button>
                            <el-button type='primary' v-else>已选择-点击重新选择</el-button>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label='特殊权限密码' prop='password'>
                        <el-input v-model='form.password2' />
                    </el-form-item>

                    <el-form-item label='权限' prop='roleId'>
                        <el-select v-model='form.roleId' placeholder='选择权限'>
                            <el-option
                                v-for='RoleItem in RoleList'
                                :key='RoleItem.id'
                                :label='RoleItem.name'
                                :value='RoleItem.id'
                            />
                        </el-select>
                    </el-form-item>
                </el-form>

                <el-button v-if='active == 0' type='primary' @click='next'>提交</el-button>

                <el-result
                    v-if='active==1'
                    icon='success'
                    title='添加成功'
                    sub-title='子账号添加成功'
                >
                    <template #extra>
                        <el-button type='primary' @click='active = 0'>返回</el-button>
                    </template>
                </el-result>

            </el-col>
        </el-row>

    </el-card>


</template>

<script lang='ts'>
import { defineComponent, reactive, Ref, ref } from 'vue'
import type { ElForm } from 'element-plus'
// 网络请求
import { getRoles,addUser } from '/@/api/User'
import { validate } from '/@/utils/formExtend'
import { ElNotification } from 'element-plus'
import router from '/@/router'
import { IUserAdd } from '/@/type/views/User/UserAdd'
import { Role } from '/@/type/common/role'

type FormInstance = InstanceType<typeof ElForm>

const getRole = async(RoleList:Array<Role>) => {
    const res = await getRoles()
    RoleList.push(...res.data.data)
}

const Role = (RoleList:Array<Role>) => {
    getRole(RoleList)
    return { RoleList }
}

// 添加用户
const adduser = async(form: IUserAdd) => {
    const res = await addUser(form)

    ElNotification({
        title: '成功',
        message: res.data.message,
        type: 'success'
    })
    await router.push('/user/userList')
    return {}
}

const add = (form: IUserAdd) => {
    const formRef = ref<FormInstance>()
    const active = ref(0)
    const rules = reactive({
        user:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        password2:[
            { required: true, message: '请输入特殊权限密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        roleId:[
            { required: true, message: '请选择权限', trigger: 'change' }
        ]
    })
    const next = async() => {
        switch (active.value) {
        case 0:
            if (!await validate(formRef)) return
            await adduser(form)
            active.value = 1
            break
        default:
            break
        }
    }

    return { rules, formRef, next, active }
}

export default defineComponent({
    name: 'UserAdd',
    components: {},
    setup() {
        const upLoadFun = (file,fileList) => {
            let reader = new FileReader()
            reader.readAsDataURL(file.raw)
            reader.onload = () => {
                form.image = reader.result
                // console.log(reader.result)
            }
        }

        const form: IUserAdd = reactive({
            user: '',
            password: '',
            roleId: '',
            image: '' // 签名图片
        })
        const RoleList: Role[] = reactive([])
        return {
            form,
            ...add(form),
            upLoadFun,
            ...Role(RoleList)
        }
    }
})
</script>
